<template>
  <div>
    <h1>事件</h1>
    <!-- 原生DOM事件 -->
    <pre @click="handler">
      大江东去浪淘尽, 千古风流人物
    </pre>

    <!-- 传递事件对象，必须明确指定$event -->
    <button @click="handler1(1, 2, 3, $event)">点击我传递多个参数</button>

    <!-- 
      vue2: 这种写法是自定义事件，可以通过.native修饰符变为DOM事件
      vue3：为原生 DOM 事件(本质是组件的根节点绑定事件)
    -->
    <Event1 @click="handler2"/>
    <Event2 @xxx="handlerXxx" @click="handleClick"/>
  </div>
</template>

<script setup lang="ts">
  import Event1 from './Event1.vue'
  import Event2 from './Event2.vue'

  const handler = (e: any) => {
    // e:原生dom事件
    console.log(e)
  }

  const handler1 = (a: any, b: any, c: any, $event: any) => {
    console.log(a, b, c, $event)
  }

  const handler2 = () => {
    console.log('abcd')
  }

  const handlerXxx = (a:any, b:any) => {
    console.log(a, b)
  }

  const handleClick = (a: string, b:string) => {
    console.log(a, b)
  }
</script>

<style scoped>
</style>